
/**
 * swiper制作
 * 1、获取接口 用axios 获取数据
 * 2、使用swiper插件
 * 3、动态渲染数据
 */
/**
 * 1、获取接口数据
 */
function getSwiperData(){
         axios({
            method:'get',
            url:'http://api.yuguoxy.com/api/shop/banner',
         }).then(response=>{
             let {resultCode,resultInfo}= response.data
             if (resultCode==1) {
                   let list=resultInfo.list
                   showBanner(list)
             }
         })
}
/**
 * 2、初始化轮播
 */
// getSwiperData()
function initSwiper(){
    new Swiper('.swiper', {
        autoplay: true, //可选选项，自动滑动
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}
/**
 * 动态渲染数据
 * 
 */
 function showBanner(list){
    let str = list.map(item=>{
        return `<div class="swiper-slide">
                   <img src="${item.url}" alt="${item.content}">
               </div>`
    }).join('')

    const swiperWrapper = document.querySelector('.swiper-wrapper')
    swiperWrapper.innerHTML = str

    initSwiper()
}
/**
 * 加载商品
 * 1、获取接口 用axios 获取数据
 * 2、用一个全局变量接收数据 
 * 3、动态渲染数据
 */
/**
 * 1、获取接口 用axios 获取数据
 */
let pageNo=1
let allstr=''
function getProductlist(pageNo) {
     axios({
         method:'get',
         url:'http://api.yuguoxy.com/api/shop/list',
         params:{
             pageSize:8,
             pageNo,
         }
     }).then(response=>{
         let {resultCode,resultInfo}=response.data
         if (resultCode ==1) {
              let list=resultInfo.list
            //   console.log(list);
              showProductList(list)
               
              
         }
         
     })
}
/**
 * 2、动态渲染数据
 */
function showProductList(list){
    console.log(list);
       let str =list.map(item=>{
           
           return `
           <li onclick="productdetail(${item.id})">
           <img src="${item.picture}" alt="productimg">
           <p class="cart-introduce">${item.product}</p>
           <p class="cart-source"><span class="source">淘宝</span> <span>包邮</span> </p>
           
           <div class="cart">
             <p class="cart-price">
               <span>￥</span>
               <span class="price">${parseInt(item.price)}</span> 
               <span class="price-decimal">${((item.price).toString()).substring((item.price).toString().indexOf('.',1))}</span>
                <span>${item.oldprice}人已买</span>
                <span class="vol">3元卷</span>
             </p>
           </div>     
         </li>
               `
       }).join('')
       allstr+=str
       const  productListul=document.querySelector('.productlist ul')
       productListul.innerHTML=allstr
}
/**
 *3、加载更多
 */
function addMore(){
        const addProduct=document.querySelector('.addproduct button')
        addProduct.addEventListener('click',function(){
            getProductlist(++pageNo )
        })
}
/**
 * 获取商品详情
 */
function productdetail(id){
    location.href = '../pages/detail.html?id='+id
}
/**
 * 回到顶部
 * 
 * 
 */
/**
 * 当滑动的距离小于header的距离就隐藏回到底部按钮
 * 大于header距离就显示出来
 * window事件
 */
const productEle=document.querySelector('.product')
const backTopBtn=document.querySelector('.product .onTop')

 function onTop(){
         window.onscroll=function(){
               if (document.documentElement.scrollTop>productEle.offsetTop) {
                   backTopBtn.style.display='block'
               }else{
                backTopBtn.style.display='none'
               }
         }        
 }
 /**
  * 点击事件回到顶部
  * 运动函数
  * 
  */
function backTop(){
    let scrollTop= document.documentElement.scrollTop
       let timer= setInterval(() => {
        document.documentElement.scrollTop=scrollTop-100
        scrollTop = document.documentElement.scrollTop
        if( document.documentElement.scrollTop<=0){
            clearInterval(timer)
        }
       }, 40);
        
}
 onTop()
addMore()
getProductlist(pageNo)
getSwiperData()